<template>
  <view class="dcfk">
    <view class="info" v-for="(item, index) in info" :key="index">
      <view class="info_item info_item_header">
        <view>项目名称</view>
        <view>{{ item.xmmc }}</view>
      </view>
      <view class="info_item">
        <view>责任单位</view>
        <view>{{ item.zrdw }}</view></view
      >
      <view class="info_item">
        <view>分管领导</view>
        <view>{{ item.fgld }}</view></view
      >
      <view class="info_item">
        <view>办理时限</view>
        <view>{{ item.blsx }}</view></view
      >
      <view class="info_item">
        <view>状态</view>
        <view>{{ item.zt }}</view>
      </view>
      <view class="info_item">
        <view>办理情况</view>
        <view>{{ item.blqk }}</view>
      </view>
      <view class="info_item">
        <view>办理时间</view>
        <view>{{ item.blsj }}</view>
      </view>
      <view class="info_download">
        <view>下载附件</view>
        <view v-for="(item, index) in item.xzfj" :key="index">{{ item }}</view>
      </view>
    </view>
    <view class="button">审核通过</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: [
        {
          xmmc: "嵩口下坂旅游综合体",
          zrdw: "嵩口镇人民政府",
          fgld: "王均康",
          blsx: "2021-01-18",
          zt: "未审核",
          blqk: "无数据",
          blsj: "2021-04-12",
          xzfj: ["xxx测试", "附件.docx"],
        },
      ],
    };
  },
  onReady() {},
  methods: {
    toDetail() {
      uni.navigateTo({
        url: "/pages/zdxm/tqxt/detail/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dcfk {
  padding-top: 24rpx;
  .info {
    width: 710rpx;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
    border-radius: 8rpx;
    padding: 0 24rpx;
    margin-top: 50rpx;

    .info_item {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      padding: 16rpx 0;

      view:nth-child(1) {
        width: 150rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8e9cb3;
      }
      view:nth-child(2) {
        flex: 1;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
        margin-left: 20rpx;
      }
    }
    .info_download {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      padding: 16rpx 0;
      view {
        width: 150rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #3074ff;
      }
      view:nth-child(1) {
        width: 150rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8e9cb3;
      }
    }
    .info_item_header {
      height: 100rpx;
      line-height: 100rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #272b32;
      border-bottom: 1rpx solid rgba(231, 233, 240, 1);
      padding: 0;

      view:nth-child(2) {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #272b32;
      }
    }
  }
  .button {
    width: 750rpx;
    height: 98rpx;
    line-height: 98rpx;
    text-align: center;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #fefefe;
    background: #3074ff;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
